import React from 'react';
import Portals from './portals';

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'Jack',
      age: 22,
      flag: true,
    }
    this.nameRef = React.createRef();
  }

  render() {
    return <div>
      <p>{this.state.name}</p>
      {/** 在JS中 for为关键字  所以 label 的for 属性使用 htmlFor 代替 */}
      {/* <label htmlFor='inputName'></label>
      <input id='inputName' value={this.state.name} onChange={this.changeName}/> */}
      <Portals/>
        <button onClick={this.showName}>changeName</button>
        modal is me
      <Portals/>
      {/* 非受控组件 */}
      <input defaultValue={this.state.name} ref={this.nameRef}/>
      <button onClick={this.showName}>changeName</button>
    </div>
  }

  changeName = (e)=> {
    this.setState({
      name: e.target.value
    })
  }
  showName= () => {
    // 获取dom元素的值  要与state 中的值 区分
    const name = this.nameRef.current.value;
    console.log(name);
  }

}

export default Form